<template lang="html">
    <div class="page-bar">
        <ul>
            <li v-show="isSaleReport"><a><input type="number" value="10" id="pagesize" style="width:40px; border: 0;" />条/页</a></li>
            <li v-show="isSaleReport"><a v-on:click="changeSize">确定</a></li>&nbsp;&nbsp;
            <li v-if="curPage!=1"><a v-on:click="curPage--">上一页</a></li>
            <li v-for="index in indexs"  v-bind:class="{ active: curPage == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="curPage!=all"><a v-on:click="curPage++">下一页</a></li>
            <li><a>共<i>{{all}}</i>页</a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Pagination',
        props: {
            cur: {
                type: [String, Number],
                required: true
            },
            all: {
                type: [String, Number],
                required: true
            },
            callback: Function,
            isSaleReport: {
                type: Boolean
            }
        },
        data() {
            return {
                curPage: this.cur,
                pageSize: 10
            }
        },
        watch: {
            'curPage': function (data) {
                this.doCallback();
            }
        },
        computed: {
            indexs() {
                var left = 1
                var right = this.all
                var ar = []
                if (this.all >= 11) {
                    if (this.curPage > 5 && this.curPage < this.all - 4) {
                        left = this.curPage - 5
                        right = this.curPage + 4
                    } else {
                        if (this.curPage <= 5) {
                            left = 1
                            right = 10
                        } else {
                            right = this.all
                            left = this.all -9
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left ++
                }
                return ar
            }
        },
        mounted() {
            // $('#pagesize').
        },
        methods: {
            changeSize: function() {
                let pageSize = parseInt($('#pagesize').val());
                if (pageSize > 100) {
                    this.toast('每页最多100条数据');
                    $('#pagesize').val(10);
                    return;
                }
                this.$emit('doChageSize',pageSize);
            },
            btnClick(page) {
                if (page != this.curPage) {
                    this.curPage = page
                }
            },
            doCallback: function () {
                this.callback(this.curPage);
            }
        }
    }
</script>

<style lang="css">
    ul,li {
        margin: 0px;
        padding: 0px;
    }

    .page-bar li {
        list-style: none;
        display: inline-block;
    }

    .page-bar li:first-child>a {
        margin-left: 0px
    }

    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }

    .page-bar a:hover {
        background-color: #eee;
    }

    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .page-bar i {
        font-style:normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }
</style>
